<template>
  <div class="print-settings-container">
    <el-card shadow="never">
      <template #header>
        <div class="card-header">
          <span>打印设置</span>
        </div>
      </template>
      <el-form :model="settingsForm" label-width="120px">
        <el-form-item label="默认打印机">
          <el-select v-model="settingsForm.defaultPrinter" placeholder="请选择默认打印机">
            <el-option v-for="printer in printerList" :key="printer.value" :label="printer.label" :value="printer.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="打印方式">
          <el-radio-group v-model="settingsForm.printMode">
            <el-radio :label="1">本地打印(需安装QZ Tray)</el-radio>
            <el-radio :label="2">浏览器打印</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="QZ Tray状态">
          <el-tag :type="qzTrayConnected ? 'success' : 'danger'">
            {{ qzTrayConnected ? '已连接' : '未连接' }}
          </el-tag>
          <el-button type="primary" link @click="checkQzTrayStatus">检测连接</el-button>
          <el-button type="primary" link @click="openQzTrayHelp">安装说明</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveSettings">保存设置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

// 打印机列表
const printerList = ref([
  { label: '打印机 1', value: 'printer1' },
  { label: '打印机 2', value: 'printer2' }
])

// 设置表单
const settingsForm = reactive({
  defaultPrinter: '',
  printMode: 2 // 默认浏览器打印
})

// QZ Tray连接状态
const qzTrayConnected = ref(false)

// 检测QZ Tray状态
const checkQzTrayStatus = () => {
  // 这里应该实际检测QZ Tray是否已安装并连接
  // 模拟检测过程
  ElMessage.info('正在检测QZ Tray连接状态...')
  setTimeout(() => {
    qzTrayConnected.value = Math.random() > 0.5
    ElMessage[qzTrayConnected.value ? 'success' : 'error'](
      qzTrayConnected.value ? 'QZ Tray连接成功' : 'QZ Tray未连接，请确认是否已安装'
    )
  }, 1000)
}

// 打开QZ Tray帮助说明
const openQzTrayHelp = () => {
  window.open('https://qz.io/download/', '_blank')
}

// 保存设置
const saveSettings = () => {
  ElMessage.success('设置保存成功')
  // 这里应该实际保存设置到后端或localStorage
  localStorage.setItem('printSettings', JSON.stringify(settingsForm))
}

// 获取保存的设置
onMounted(() => {
  const savedSettings = localStorage.getItem('printSettings')
  if (savedSettings) {
    const parsedSettings = JSON.parse(savedSettings)
    Object.assign(settingsForm, parsedSettings)
  }
  
  // 初始检测QZ Tray状态
  checkQzTrayStatus()
})
</script>

<style lang="scss" scoped>
.print-settings-container {
  padding: 20px;
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
  }
}
</style> 